<template>
  <form>
    <slot name="default"></slot>
    <div class="submit-area" @click.prevent="onSubmit">
      <slot name="submit">
        <button class="btn btn-primriy">提交</button>
      </slot>
    </div>
  </form>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'
import { eventriger } from '@/mitt/index'
import { FuncItemProps } from './types.d'

export default defineComponent({
  setup(props, context) {
    // 定义数组，接收子组件每一次出发校验函数的时候，传递过来的那个函数体
    const funcArr: FuncItemProps[] = []
    const callback = (func: any) => {
      funcArr.push(func)
    }
    eventriger.on('form-item', callback)
    onUnmounted(() => {
      eventriger.off('form-item', callback)
    })

    const onSubmit = () => {
      const res = funcArr.map((func) => func()).every((v) => v)
      // 通过context 实现自定义事件的子父传参
      context.emit('submit', res)
    }
    return {
      onSubmit
    }
  }
})
</script>
<style scoped lang="scss"></style>
